﻿<template>
  <div class="activity_container">
    <header class="new_header">
       <img src="../../static/img/new_style_go_back.png"
            class="img_header" v-on:click="goback"/>
        {{menu_list.title}}
       <!--<div class="my_match">
         我的参赛
       </div>-->
      <!--<div class="add_act_val" v-on:click="shpw_add_mess">-->
        <!--添加信息-->
      <!--</div>-->
    </header>

    <!-- write div s -->
    <div class="write_div">


    </div>
    <!-- write div e -->

    <!-- banner s -->
    <div class="act_banner">
      <img v-bind:src="menu_list.cover|new_img_show_base"/>
      <div class="act_banner_bot">
           <div>截至：{{menu_list.abortTime|format_date('YMD')}}</div>
           <div>参赛者：{{user_num}}</div>
      </div>
    </div>
    <!-- banner e -->
    <!-- candidates s -->
    <div class="candidates">
      <div class="candidates_title">
        晋级者
      </div>

      <div class="candidates_box_wrapper">
        <div class="candidates_box">
          <scroll :card_mess="card_mess" v-if="show_card_mess" @scroll_a="listenChildMsg"></scroll>
        </div>
      </div>

    </div>

    <!-- candidates e -->
    <!-- user_info s -->
    <!-- bottom_list -->
    <div class="user_info">

      <!-- user_info box s 官方-->
      <div class="user_info_music"  style="display:none">
        <div class="user_info_user_name">
          <p>官方</p>
          <p style="margin-top:0.1rem;">转播</p>
        </div>
        <div class="play_music">

        </div>
        <div class="dianzan_activity">
          <img src="../../static/img/rank_heart.png" class="rank_heart_img">
          <p>12345</p>
        </div>
        <div class="user_info_line">

        </div>
        <img src="../../static/img/more.png" class="more" v-on:click="Letter_box()"/>
      </div>
      <!-- user_info box e 官方-->

      <!-- user_info box s 用户 -->
      <div class="user_info_music" style="background-color:#9f5c2f; display:none">
        <div class="user_info_user_name">
          <p style="transform:translateY(50%)">匿名</p>
        </div>
        <!-- music play s -->
        <!--<div class="play_music" v-on:click="play_music_click(bottom_list.voice|rank_act_voice)"  v-bind:data-voice="bottom_list.voice|rank_act_voice">-->
        <!--</div>-->
        <!-- music play e -->
        <div class="dianzan_activity">
          <img src="../../static/img/rank_heart.png" class="rank_heart_img">
          <p>12345</p>
        </div>
        <div class="user_info_line">
        </div>
        <img src="../../static/img/more.png" class="more" />
      </div>
      <!-- user_info box e 用户 -->

      <!-- user_info box img s -->
      <div class="user_info_img box_shadow" v-bind:class="{ 'user_info_img_user': bottom_list.user_flag, 'user_info_img_off ': !!property&&!bottom_list.user_flag,'user_info_img_nor': !bottom_list.user_flag}" v-for="bottom_list in bottom_list">
        <div class="user_info_user_name" v-show="bottom_list.property==0">
          <p>官方</p>
          <p style="margin-top:0.1rem;">转播</p>
        </div>

        <div class="user_info_user_name" v-show="bottom_list.property==1 && !bottom_list.user_flag">
          <p style="transform:translateY(50%)">匿名</p>
        </div>

        <div class="user_info_user_name" v-show="bottom_list.user_flag">
          <p style="transform:translateY(50%)">我的</p>
        </div>
        <!-- music play s -->
        <div class="play_music" v-on:click="play_music_click(bottom_list.voice|rank_act_voice)" v-bind:data-voice="bottom_list.voice|rank_act_voice" v-show="bottom_list.type=='语音'">
        </div>
        <!-- music play e -->

        <!-- img s -->
        <div class="wrap_info_user_img" style="position:relative;" v-show='bottom_list.type=="图片"'>

          <!-- wrap_img s -->
          <div class="wrap_img" style="position:relative;width:66vw;height:6rem;overflow:hidden;">
            <!--<img v-bind:src="bottom_list.enroller.image|img_show_base" class="user_info_img" style="width:66vw;height:6rem;" />-->
            <img v-bind:src="bottom_list.work|new_img_show_base" class="user_info_img" style="width:100%"
                 v-on:click="show_big_img_on_act(bottom_list.work)" />

            <!-- 点赞s -->
            <div class="dianzan_activity" style="position:absolute;top:0;right:0;" v-on:click="dianzan_activity(bottom_list.id)">
              <img src="../../static/img/rank_heart.png" class="rank_heart_img"
                   style="display:inline;vertical-align:top;">

              <span style="vertical-align:middle;margin-right:2vw;margin-left:2vw;">{{bottom_list.love}}</span>
            </div>
            <!-- 点赞e -->

          </div>
          <!-- wrap_img e -->

        </div>
        <!-- img e -->

        <!-- ws -->
        <div class="show_w wrap_info_user_img" v-show="bottom_list.type=='文字'">
             {{bottom_list.work}}
        </div>
        <!-- we -->

        <div class="user_info_line">&nbsp;</div>
        <img src="../../static/img/more.png" class="more" v-on:click="Letter_box(bottom_list.id)"/>
      </div>
      <!-- user_info box img e -->

    </div>

    <!-- user_info e -->
    <!-- user_info bottom write_box s -->
     <div class="user_info_bottom_write_box">
       &nbsp; &nbsp; &nbsp; &nbsp;
     </div>
    <!-- user_info bottom write_box e -->
    <!-- bottom height s -->
    <div class="bottom_height" style="width:100%;height:1rem;">&nbsp;&nbsp;</div>
    <!-- bottom height e -->
    <div class="bottom_btn_wrap">
      <!--<div class="bottom_btn_share bottom_base_btn">
        分享
      </div>-->
      <!--<div class="bottom_btn_pinglun bottom_base_btn" v-on:click="pinglunshow">-->
        <!--评论-->
      <!--</div>-->
      <!--<div class="bottom_btn_bm bottom_base_btn" v-on:click="baom_btn">-->
        <!--报名-->
      <!--</div>-->
      <!--<div class="bottom_now bottom_base_btn">
        现场转播
      </div>-->
    </div>

    <!-- 语言播放s -->
    <audio v-bind:src="music_src" ref="audio">

    </audio>
    <!-- 语音播放e -->

    <!-- 报名s -->
    <!--wrap_b_show-->
    <div class="wrapper_baom" v-show="wrap_b_show">
      <div class="baom clearfix">
        <img src="../../static/img/smile.jpg" class="smile">
        <div class="close_baom" v-on:click="close_x">X</div>
        <div class="baom_header" v-show="wrap_b_show&&baom_header_data">
          报名成功!
        </div>
        <div class="baom_header" v-show="wrap_b_show&&!baom_header_data">
          添加信息
        </div>
        <div class="baom_mid_header">
          （可以在“我的活动”里查看）
        </div>
        <div class="baom_bot_header">
          请根据比赛或者活动主题上传
          你的作品表达你的想法！
        </div>
        <!--<div class="add_img_btn">
          <img src="../../static/img/rank_add_img.png" class="add_img_btn_1_img" />
          <p class="add_img_w">添加图片/视频</p>
        </div>
        <div class="add_img_btn">
          <img src="../../static/img/rank_add_img.png" class="add_img_btn_1_img" />
          <p class="add_img_w">添加语音</p>
        </div>-->
        <!-- 添加图片s -->
        <img src="../../static/img/act_add_img.png" alt="Alternate Text"class="add_btn" v-on:click="add_img_this_page"/>
        <!-- 添加图片e -->
        <img src="../../static/img/add_voice.png" alt="Alternate Text" class="add_btn"  v-on:click="add_voice_this_page"/>
        <img src="../../static/img/add_word.png" alt="Alternate Text" class="add_btn"  v-on:click="add_www_tihs_page"/>
        <img src="../../static/img/add_detail_mes.png" alt="Alternate Text" class="add_btn"  v-on:click="add_btn"/>
        <!--<div class="baom_bottom_s">
          赶紧和小伙伴一起参加吧!<img src="../../static/img/ad_share_icon.png" class="icon_img"/>
        </div>-->
      </div>
    </div>
    <!-- 报名e -->
   <!-- act 评论提交 s-->

    <div class="commit_on_put" v-show="commit_show" v-on:click.self="commit_show_fun">
      <div class="commit_box">
          <textarea class="commit_input clearfix" placeholder="输入评论" ref="commit_p">

          </textarea>
          <div class="commit_btn" v-on:click.self="commit_up_load">
            提交
          </div>
      </div>
    </div>

    <!-- act 评论提交 e-->

    <!--活动预测s  -->
    <div class="act_forecast" v-if="act_forecast_show">
      <div class="act_for_box" style="position:relative">
          <div class="act_header" style="position:relative">

            <!-- close btn s -->
            <div class="act_close_btn" v-on:click="act_close_btn_f">
              x
            </div>
            <!-- close btn e -->

            <span class="act_header_num" style="padding-right:4vw;">{{poll_list.id}}号</span>{{poll_list.userName}}
            <img v-bind:src="poll_list.image|img_show_base" style="width:11vw;height:11vw;overflow:hidden;" class="act_header_img"/>
            <!-- letter s -->
            <img class="act_letter" src="../../static/img/letter_l.jpg" />

            <!-- letter e -->
          </div>
          <img v-bind:src="poll_list.cover|new_img_show_base" class="act_main_img"  v-on:click="act_banner_f" >
          <div class="" style="height:1.6rem"  v-show=!poll_list.halowars>&nbsp;</div>
          <div class="mid_box" style="display:flex;"  v-show=poll_list.halowars v-on:click="play_music_click(poll_list.halowars)">
            <div class="mid_box_line" style="font-size:4vw;color:#9f5c2f;">
              播放
            </div>
            <img src="../../static/img/music_player_icon.png" style="width:8.8vw;height:5.3vw;margin-left:1.6vw;margin-top:0.2vw;"/>
          </div>
        <div class="acat_bottom" style="display:flex;">
          <div class="act_bot_w">
            关注预测
          </div>
          <div class="act_bot_box_wrapper">

            <div class="act_bot_box" v-on:click="vote_f(poll_list.schedules[0].id)">
              <p class="act_bot_num">{{poll_list.numbers[0]}}</p>
              <div class="act_b">
              </div>
              <div class="act_name">冠军</div>
            </div>
            <div class="act_bot_box" v-on:click="vote_f(poll_list.schedules[1].id)">
              <p class="act_bot_num">{{poll_list.numbers[1]}}</p>
              <div class="act_b">
              </div>
              <div class="act_name">亚军</div>
            </div>
            <div class="act_bot_box" v-on:click="vote_f(poll_list.schedules[2].id)">
              <p class="act_bot_num">{{poll_list.numbers[2]}}</p>
              <div class="act_b">
              </div>
              <div class="act_name">季军</div>
            </div>
            <div class="act_bot_box" v-on:click="vote_f(poll_list.schedules[3].id)">
              <p class="act_bot_num">{{poll_list.numbers[3]}}</p>
              <div class="act_b">
              </div>
              <div class="act_name">殿军</div>
            </div>
            <div class="act_bot_box" v-on:click="vote_f(poll_list.schedules[4].id)">
              <p class="act_bot_num">{{poll_list.numbers[4]}}</p>
              <div class="act_b">
              </div>
              <div class="act_name">其他</div>
            </div>
          </div>


        </div>
      </div>
    </div>
    <!-- 活动预测e -->
    <!-- 添加图片show_div s -->
    <div class="show_div_wrapper" v-show="show_div_wrapper_data">
       <div class="show_div_contain_img">
         <img src="#" alt="Alternate Text" class="show_div_wrapper_img" ref="show_act_img"/>
       </div>
       <div class="show_div_wrapper_certain_btn" v-on:click="certain_act_img">
         确认
       </div>
       <div class="show_div_wrapper_certain_btn" style="background-color:#5f9806;left:70%;" v-on:click="certain_act_img_hide">
         取消
       </div>
    </div>

    <!-- 添加图片show_div e -->

    <!-- 用来触发的图片inputs -->
    <input type="file" name="name" value="" style="display:none;" ref="get_img_file"/>
    <!-- 用来触发的图片 inpute -->

    <!-- 添加语音s -->

    <div class="luyi_wapper" v-show="luyi_wapper_data" v-on:click.self="luyi_wapper_data_fun">
      <div class="luy_box">
        <div class="add_voice" v-show="add_s" v-on:click="get_voice">
          添加录音
        </div>
        <div class="add_voice" style="background-color:#ff0000" v-show="loading_voice" v-on:click="loading_voice_f">
          录音中
        </div>
        <div class="add_voice" style="background-color:#2aa549" v-show="play_data" v-on:click="play_music">
          播放语言
        </div>
        <div class="add_voice" style="background-color:#2aa549" v-show="pause_data" v-on:click="play_pause">
          语言暂停
        </div>
        <div class="add_voice" style="background-color:#ff0000" v-show="del_data" v-on:click="del_voice">
          删除语音
        </div>
        <div class="add_voice" style="background-color:#ff0000" v-show="upload_voice_data" v-on:click="fuwenb_up_voice">
          语言上传
        </div>
      </div>
    </div>
    <!-- 添加语音e -->
    <!-- 添加文字s -->
    <div class="add_w_container" v-show="add_w_container_data" v-on:click.self="add_w_container_fun">
      <div class="add_w_main_wrapper">
        <input type="text" class="add_w_container_input" style="width:80%;height:8vw;border:1px solid #9f5c2f;margin-top:2vw;margin-bottom:2vw;border-radius:2vw;" placeholder="输入文字" ref="www_input"/>
        <div class="add_w_btn" style="width:12vw;height:10vw;line-height:10vw;text-align:center;font-size:4vw;color:#fff;background-color:#e85454;border-radius:2vw;margin:2vw auto;" v-on:click="up_load_ww">提交</div>
      </div>
    </div>

    <!-- 添加文字e -->

    <!-- show fuwentb s -->
    <div class="add_w_container" v-show="show_fwenb" v-on:click.self="show_fwenb_fun">
        <div v-html="show_fwenb_data" style="width:90vw;height:100%;overflow:scroll;"></div>
    </div>

    <!-- show fuwenb e -->

    <!-- audio s -->
    <audio src="" ref="audio" v-bind:class="{show_audio:show_audio_data}" style="position:absolute;bottom:8vw;left:50%;transform:translateY(-50%)">

    </audio>
    <!-- audio e -->
    <!-- img show_ s -->
    <div class="add_w_container" v-show="act_img_show_data" style="background-color:black;" v-on:click="act_img_show_f">
      <!--<div class="show_div_wrapper_certain_btn" style="background-color:#5f9806;left:50%"  v-on:click="act_img_show_f">关闭</div>-->
      <img v-bind:src="act_img_show" style="width:90%;min-height:90%;display:block;margin:4vw auto 0"  v-on:click="act_img_show_f">
    </div>
    <!-- img show_e -->
  </div>
</template>
<script>
  import { mapState, mapMutations, mapActions, mapGetters } from 'vuex';
  import { Toast, Indicator } from 'mint-ui';
  import Header_other from "./header_other/Header_other.vue";
  //limit_Scroll
  //import limit_scroll from "../../static/js/limit_scroll.js"
  var qs = require('qs');

  import "../filter/filter.js";
  import scroll from "./nav_gift_scrol.vue";
  import common from "../common/common.js";
  import Vue from 'vue';
  import VueAwesomeSwiper from 'vue-awesome-swiper';
  import "../../static/css/new_style/new_style.css";
  Vue.use(VueAwesomeSwiper)
  //axios.post('/foo', qs.stringify({ 'bar': 123 }));

export default {
  name: 'hello',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      menu_list: "",
      Enroller: "",
      card_mess: "",
      show_card_mess: false,
      bottom_list: "",
      music_src: "",//音乐播放
      play_music_flag: false,
      wrap_b_show: false,
      commit_show: false,
      act_forecast_show: false,
      poll_list: "",
      this_child_enroll_id: "",
      img_list: [],//获取的图片
      show_div_wrapper_data: false,
      sign_id: "",
      list_img: [],
      add_s: true,
      loading_voice: false,
      play_data: false,
      pause_data: false,
      del_data: false,
      upload_voice_data: false,
      luyi_wapper_data: false,
      baom_header_data: true,
      add_w_container_data: false,
      user_num: "",//参加的人数user_info_img
      show_fwenb: false,
      show_fwenb_data: false,
      show_audio_data:false,//audio 显示
      act_img_show_data: false,
      act_img_show: "",
      baom_name:"报名",
      base_url:""
    }
  },
  ...mapActions([
    "thom_redirect",
  ]),
  ...mapMutations([
     "Change_certain_layer"
  ]),
  mounted: function () {
    //微信sdk 配置
    let base_url ="";
    common.is_app(this);
    console.log("activity")
    console.log(this.base_url);
    let url = location.href;
    url = url.split("#")[0];
    this.$http.post(this.base_url+'/yizhiweimen/api/wxUtil/getSign',
      qs.stringify(
        {
          "url": url
        })
      )
      .then((e) => {
        // 上面两个请求都完成后，才执行这个回调方法
        let data = e.data
        wx.config({
          debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
          appId: data.appId, // 必填，企业号的唯一标识，此处填写企业号corpid
          timestamp: data.timestamp, // 必填，生成签名的时间戳
          nonceStr: data.nonceStr, // 必填，生成签名的随机串
          signature: data.signature,// 必填，签名，见附录1
          jsApiList: ["startRecord", "stopRecord", "onVoiceRecordEnd", "playVoice", "pauseVoice", "stopVoice", "onVoicePlayEnd", "uploadVoice"] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
        });
      })
      .catch((e) => {
        console.log(e)
        Toast({
          message: "网络出错",
          position: 'bottom',
          duration: 2000
        });
      })

    this.$nextTick(() => {
      console.log("nexttick___________")
      let app = document.getElementById("app");
      app.style.backgroundColor = "#eeeeee";
      this.listener_get_img();//添加 图片监听
    })
    let rank_id = sessionStorage.getItem("rank_id");
    Indicator.open();
    //获取产赛用户数量

    let user_id = sessionStorage.getItem("user_id");
    ///api/user / activity / getCount
    this.$http.get(this.base_url+'/yizhiweimen/api/user/activity/getCount?actionId=' +  rank_id,
      qs.stringify(
        {
          "actionId": rank_id
        })
      )
      .catch((thrown) => {
        console.log(thrown);

      }).then((e) => {
        console.log("actionId")
        console.log(e.data)
        this.user_num = e.data;
      })

    this.$http.get(this.base_url+'/yizhiweimen/api/user/activity/getActivityById?id=' + rank_id,
      qs.stringify(
        {
          "id": rank_id
        })
      )
      .catch((thrown) => {
        console.log(thrown);

      }).then((e) => {
        console.log(e)
        this.menu_list = e.data;
      })

    //晋级者数据获取

    this.$http.get(this.base_url+'/yizhiweimen/api/user/activity/getEnrollerByActionId?actionId=' + rank_id,
      qs.stringify(
        {
          "actionId": rank_id
        })
      )
      .catch((thrown) => {
        console.log(thrown);
      }).then((e) => {
        this.card_mess = e.data;
        this.show_card_mess = true;
        this.$nextTick(() => {
          console.log("tick___________");
          this.show_card_mess = true;
        })
      })


    //参赛人
    /// api / user / activity / getEnrollactiveById
    this.$http.get(this.base_url+'/yizhiweimen/api/user/activity/getWorkTableByactionId?actionId=' + rank_id + "&pageNo=" + 1 +"&pageSize="+100,
      qs.stringify(
        {
          "id": rank_id
        })
      )
      .catch((thrown) => {
        Indicator.close();
        console.log(thrown);
      }).then((e) => {
        Indicator.close();
        console.log("e.data.workTables");
        console.log(e.data.workTables);
        if (this.bottom_list.count == 0) {
          return;
        }

        this.bottom_list = e.data.workTables;

        for (let x = 0; x < this.bottom_list.length; x++) {
          if (this.bottom_list[x].uid == user_id) {
            this.bottom_list[x].user_flag = true
          } else {
            this.bottom_list[x].user_flag = false
          }
        }
        console.log("bottom_list")
        console.log(this.bottom_list)

      })

    //是否报过名
    this.$http.get(this.base_url+'/yizhiweimen/api/user/activity/judgmentSignUp?activeId=' + rank_id +"&uid="+user_id,
      qs.stringify(
        {
          "activeId": rank_id,
          "uid": user_id
        })
    )
    .catch((thrown) => {
        Indicator.close();
        console.log(thrown);
    }).then((e) => {
      Indicator.close();
      this.sign_id = e.data;
      this.this_child_enroll_id = e.data;
      sessionStorage.setItem("sign_id", e.data);

    })


  },
  methods: {
    show_big_img_on_act: function (url) {
      this.act_img_show = "http://wx.yizhiweimeng.com" + url;
      this.act_img_show_data = true
    },
    act_img_show_f: function () {
      this.act_img_show_data = false;
    },
    //act_banner
    act_banner_f: function () {
      this.$store.dispatch("thom_redirect",
        {
          name: "/fwb_big", router: this.$router
        });
    },
    //audio play
    audio_play: function () {
      this.$refs.audio.play();
    },
    audio_pause: function () {
      this.$refs.audio.pause();
    },
    show_fwenb_fun: function () {
      this.show_fwenb = false;
    },
    show_btnf: function () {
      let base_url ="";
      if(sessionStorage.getItem("is_app") == true ||sessionStorage.getItem("is_app") == "true"){
        let base_url = common.get_base_url();
        console.log("base_url");
        console.log(base_url);
      }
      let sign_id = sessionStorage.getItem("rank_id");
      let user_id = sessionStorage.getItem("user_id");
      ///接口有问题
      this.$http.post(base_url+'/yizhiweimen/api/user/activity/getInformation',
        qs.stringify(
          {
            "files": www,
            "type": "文字",
            "activiId": sign_id,
            "uid":user_id
          })
      )
        .catch((thrown) => {
          Indicator.close();
          console.log(thrown);
        }).then((e) => {
          Toast({
            message: e.data,
            position: 'bottom',
            duration: 2000
          });
          if (e.data == "成功！") {
            this.show_fwenb = false;
          }
          this.add_w_container_data = false

        })
    },
    add_www_tihs_page: function () {
      this.add_w_container_data = true;
    },
    add_w_container_fun: function () {
      console.log("ffffffffffffff");
      this.add_w_container_data = false;
    },
    up_load_ww: function () {

      let www = this.$refs.www_input.value;
      let sign_id = sessionStorage.getItem("rank_id");
      let user_id = sessionStorage.getItem("user_id");
      let formData = new FormData();
      formData.append("files", this.$refs.get_img_file.files[0])//产赛封面
      formData.append("type", "图片")//内容
      formData.append("activiId", this.sign_id)//内容
      formData.append("property", 1)//官方or 匿名
      formData.append("uid", user_id)//user_id
      if (www == "" || www == null || www == undefined) {
        Toast({
          message: "没有输入数据",
          position: 'bottom',
          duration: 2000
        });
        return
      }
      this.$http.post(this.base_url+'/yizhiweimen/api/user/activity/addEntries',
        qs.stringify(
          {
            "work": www.toString(),
            "type": "文字",
            "activiId": sign_id,
            "uid": user_id,
            "property":1
          })
       )
        .catch((thrown) => {
          Indicator.close();
          console.log(thrown);
        }).then((e) => {
          Toast({
            message: e.data,
            position: 'bottom',
            duration: 2000
          });
          this.add_w_container_data = false

        })
    },
    luyi_wapper_data_fun: function () {
      this.luyi_wapper_data = false
    },
    fuwenb_up_voice: function () {
      let base_url ="";
      if(sessionStorage.getItem("is_app") == true ||sessionStorage.getItem("is_app") == "true"){
        let base_url = common.get_base_url();
        console.log("base_url");
        console.log(base_url);
      }
      ///api/user / activity / addEntries
      let rank_id = sessionStorage.getItem("rank_id")
      if (this.record_voice == "" || this.record_voice == 1 || this.record_voice == null || this.record_voice == undefined) {
        Toast({
          message: "没有录音数据",
          position: 'bottom',
          duration: 2000,

        });
        return
      }
      let user_id = sessionStorage.getItem("user_id");
      let formData =  new FormData();
      formData.append("files", this.record_voice)//获取语言
      formData.append("type", "语音")//内容
      formData.append("activiId", rank_id)//内容
      formData.append("property", 1)//官方or 匿名
      formData.append("uid", user_id)//user_id
      this.$http.post(this.base_url+'/yizhiweimen/api/user/activity/addEntries',
        formData
        )
        .catch((thrown) => {
          Indicator.close();
          Toast({
            message: "网络出错",
            position: 'bottom',
            duration: 2000
          });
          console.log(thrown);
        }).then((e) => {
          Toast({
            message: e.data,
            position: 'bottom',
            duration: 2000
          });
          //添加语音到富文本
          this.luyi_wapper_data = false;
        })
    },
    //暂停
    play_pause: function () {
      this.play_data = true;//播放语音
      this.pause_data = false;//停止语音
      //暂停操作
      //mui.plusReady(function () {
      //  this.play_p.pause();
      //})
    },
    //删除语言
    del_voice: function () {
      this.pause_data = false;//暂停去掉
      this.add_s = true;//t添加出现
      this.del_data = false//删除去掉
      this.play_data = false//播放去掉

      this.music_url = ""//把地址去掉

      this.record_voice = null//清空录音
      // this.music_w = 0 //时间轴显示的时间

    },
    //header 添加信息
    shpw_add_mess: function () {
      let sign_id = sessionStorage.getItem("sign_id");
      if (sign_id == 0) {
        Toast({
          message: "请先报名",
          position: 'bottom',
          duration: 2000
        });
          return;
      }
      this.baom_header_data = false;
      this.wrap_b_show = true;
    },
    //loading_voice 停止语音
    loading_voice_f: function () {
      this.add_s = false;
      this.play_data = true;
      this.del_data = true;//删除语言
      this.upload_voice_data = true;
      this.loading_voice = false
      //停止录音
      wx.stopRecord({
        success: (res) => {
          //语音
          this.record_voice = res.localId;
          //停止时间轴动画

        }
      });
    },
    //录音
    get_voice: function (resolve, reject) {
      this.add_s = false;
      this.loading_voice = true
      //this.play_data = true;
      //this.del_data = true;//删除语言
      //record
      //开始录音

      wx.startRecord();

      wx.onVoiceRecordEnd({
        complete: (res) => {
          //alert("录音完成");
          //语音
          this.record_voice = res.localId;
          //出现删除语音标志 和 动画状态
          this.done_record();
          //停止时间轴动画
          //clearInterval(this.setInterval_id)
        }
      });
    },
    //播放音乐
    play_music: function (voice) {

      this.play_data = false;//播放音乐 去掉
      this.pause_data = true;//暂停
      this.del_data = true;//删除语言


      wx.playVoice({
        localId: this.record_voice // 需要播放的音频的本地ID，由stopRecord接口获得
      });
    },
    //添加活动语音
    add_voice_this_page: function () {
      this.luyi_wapper_data = true;
    },
    certain_act_img_hide: function () {
      this.$refs.get_img_file.value = "";
      this.show_div_wrapper_data = false
    },
    add_img_this_page: function () {
      this.$refs.get_img_file.click();
    },
    get_bottom_act_mess: function () {

      let rank_id = sessionStorage.getItem("rank_id");
      this.$http.get(this.base_url+'/yizhiweimen/api/user/activity/getWorkTableByactionId?actionId=' + rank_id + "&pageNo=" + 1 + "&pageSize=" + 100,
        qs.stringify(
          {
            "id": rank_id
          })
        )
        .catch((thrown) => {
          Indicator.close();
        }).then((e) => {
          Indicator.close();
          if (this.bottom_list.count == 0) {
            return;
          }
          this.bottom_list = e.data.workTables;
        })
    },
    //提交活动图片
    certain_act_img: function (id) {

      Indicator.open();
      let user_id = sessionStorage.getItem("user_id");
      let rank_id =sessionStorage.getItem("rank_id")
      let formData = new FormData();
      formData.append("files", this.$refs.get_img_file.files[0])//产赛封面
      formData.append("type", "图片")//内容
      formData.append("activiId", rank_id)//内容
      formData.append("property", 1)//官方or 匿名
      formData.append("uid", user_id)//

      this.$http.post(this.base_url+"/yizhiweimen/api/user/activity/addEntries",
          formData
      )
      .catch((thrown) => {
          Indicator.close();
          console.log(thrown);
        }).then((e) => {
          Indicator.close();
          Toast({
            message: e.data,
            position: 'bottom',
            duration: 2000
          });
          if (e.data == "成功！") {
            this.show_div_wrapper_data = false;
            this.$refs.get_img_file.value = "";
            this.get_bottom_act_mess();
          }
        })
    },
    //监听 获取图片事件
    listener_get_img: function (){

      //图片添加
      let _this = this; // 下面的 this 是 input 指向input的
      this.$refs.get_img_file.addEventListener("change", (e) => {
        //promise s
        let count = 0;
        let result = e.srcElement.files;
        this.list_img = [];
        this.img_list = [];
        this.list_img.push(e.srcElement.files)//提交用的图片数组
        let promise = new Promise((resolve, reject) => {
          let Len = e.srcElement.files.length,
            tips_index = _this.swiper_tips_index
          if (e.srcElement.files.length > 6) {
            Toast({
              message: '图像张数不能大于6张',
              position: 'bottom',
              duration: 2000
            });
            return;
          }

          this.e_files = e.srcElement.files

          for (let x = 0; x < Len; x++) {
            let reader = new FileReader();

            reader.readAsDataURL(result[x]);

            let _e = e;

            reader.onload = (e) => {
              this._has_img = true;
              this.img_list.push({ img: e.target.result, plus: false, w: false, tips: false });
              resolve("11");
            }
          }
        });

        promise.then((value) => {
          this.img_tips = false;
          // success
          _this.swipe_show = true;
          this.$refs.show_act_img.src = this.img_list[0].img;
          this.show_div_wrapper_data = true
        }, (value) => {
          // failure
        });
      })
    },
    //投票
    vote_f: function (id) {

//      let base_url = common.get_base_url();
      ///api/user / activity / Vote
      let user_id = sessionStorage.getItem("user_id");
      let enroll_id = this.this_child_enroll_id;
      Indicator.open();
      this.$http.post(this.base_url+"/yizhiweimen/api/user/activity/Preview",
        qs.stringify(
          {
            "forecastId": enroll_id,
            "uid": user_id,
            "scheduleId":id
          })
        )
        .catch((thrown) => {
          Indicator.close();
          console.log(thrown);
        }).then((e) => {
          Indicator.close();
          console.log("user_act_sssssss");
          Toast({
            message: e.data,
            position: 'bottom',
            duration: 2000
          });
          this.act_forecast_show = false;

        })
    },
    act_close_btn_f: function () {
      this.act_forecast_show = false;
    },
    //listenChildMsg
    listenChildMsg: function (id) {

//      let base_url = common.get_base_url();
      ///api/user / activity / getActivityById

      //this.this_child_enroll_id = id;
      sessionStorage.setItem("roll_id", id);

      Indicator.open();
      this.$http.get(this.base_url+'/yizhiweimen/api/user/activity/accessDetails?enrollactiveId='+id,
        qs.stringify(
          {
            "enrollactiveId": id,
          })
        )
        .catch((thrown) => {
          Indicator.close();
          console.log(thrown);
        }).then((e) => {
          Indicator.close();
          console.log("user_act_sssssss");
          console.log(e.data);
          this.poll_list = e.data;

          this.act_forecast_show = true;
        })
    },
    //评论提交
    commit_up_load: function (e) {
//      let base_url = common.get_base_url();
      let user_Id = common.get_user_id();
      let rank_id = sessionStorage.getItem("rank_id");

      Indicator.open();
      let commit_p = this.$refs.commit_p.value
      if (commit_p == "") {
         Toast({
          message: '请输入评论内容',
          position: 'bottom',
          duration: 2000
        });
        return;
      }
      this.$http.post(this.base_url+'/yizhiweimen/api/user/activity/comment',
        qs.stringify(
          {
            "enrollactiveId": rank_id,
            "uid": user_Id,
            "content": commit_p
          })
        )
        .catch((thrown) => {
          Indicator.close();
          console.log(thrown);
        }).then((e) => {
          Indicator.close();
          if (e.data == "") {
            Toast({
              message: "评论成功",
              position: 'bottom',
              duration: 2000
            });
            this.commit_show = false;
          }
        })
    },
    //显示评论框
    pinglunshow: function () {
      //this.commit_show = true;
      this.$store.dispatch("thom_redirect",
        {
          name: "/Letter_list_input_big", router: this.$router
        });
    },
    //评论关闭
    commit_show_fun: function () {
      console.log("show_commit_false");
      this.commit_show = false;
    },
    //add_btn
    add_btn: function () {
      this.$store.dispatch("thom_redirect",
        {
          name: "/up_load_act", router: this.$router
        });
    },
    //goback
    goback: function () {
      this.$store.dispatch("thom_redirect",
        {
          name: "/rank", router: this.$router
        });
    },
    //Letter_box
    Letter_box: function (id) {
      ///api/user / activity / getCommentEnrollactive
      sessionStorage.setItem("s_id",id)
      this.$store.dispatch("thom_redirect",
        {
          name: "/Letter_box_input", router: this.$router
        });
    },
    //baom_btn
    baom_btn: function () {
      let user_id = sessionStorage.getItem("user_id");

      if (!user_id){
        Toast({
          message:"请先登陆",
          position: 'bottom',
          duration: 2000
        });
        return
      }

      let rank_id = sessionStorage.getItem("rank_id");
      let base_url = common.get_base_url();
      Indicator.open();
      this.$http.get(this.base_url+'/yizhiweimen/api/user/activity/Enlist?activeId=' + rank_id + "&uid=" + user_id,
        qs.stringify(
          {
            "activity.id": rank_id,
            "enroller.id": user_id
          })
        )
        .catch((thrown) => {
          Indicator.close();
          Toast({
            message: "网络错误",
            position: 'bottom',
            duration: 2000
          });
          console.log(thrown);
        }).then((e) => {
          Indicator.close();
          sessionStorage.setItem("sign_id",e.data);
          Toast({
            message: e.data,
            position: 'bottom',
            duration: 2000
          });
          if (e.data == "报名成功") {
            this.wrap_b_show = true;
            this.baom_header_data = true
          }
        })
    },
    //close_x
    close_x: function () {
      this.wrap_b_show = false;
      this.baom_header_data = true;

    },
    //play_music
    play_music_click: function (url) {
      this.$refs.audio.src = "http://wx.yizhiweimeng.com" + url;
      if (this.play_music_flag == false) {
        this.$refs.audio.pause();
        this.$refs.audio.play();
        this.play_music_flag = true;
      } else {
        this.$refs.audio.pause();
        this.play_music_flag = false
      }
    },
    dianzan_activity: function (id) {

      let user_Id = sessionStorage.getItem("user_id");
      let base_url = common.get_base_url();
      ///api/user / activity / GiveTheThumbsUp
      this.$http.get(this.base_url+'/yizhiweimen/api/user/activity/someGreatWorks?uid=' + user_Id + "&workId=" + id,

        )
        .catch((thrown) => {
          Indicator.close();
          console.log(thrown);
        }).then((e) => {
          this.get_bottom_act_mess();
          Indicator.close();
          console.log("data___")
          //console.log(e.data);
          Toast({
            message: e.data,
            position: 'bottom',
            duration: 2000
          });
        })
    }
  },
  components: {
    Header_other,
    scroll
  }
}
</script>
<style>
  .mint-indicator-wrapper{
    z-index:10000;
  }
</style>
<style scoped>
  .user_info_img_user {
    background-color: #fea501
  }
  .user_info_img_off {
    background-color: #e85454;
  }
  .user_info_img_nor {
    background-color: #874920
  }
  .user_info_img box_shadow {
    padding-bottom: 1vw;
  }
  .wrap_info_user_img {
    padding-top: 1vw;
    font-size: 4vw;
    color: #fff;
    width: 65vw;
    line-height: 1.2;
  }
  .act_bot_box_wrapper {
    width: 70vw;
    display: flex;
    justify-content: space-around;
  }
  /*add_w_container s*/
  .add_w_main_wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 50vw;
    background-color: #fff;
    border-radius: 2vw;
    z-index: 1000;
  }
  .add_w_container {
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(0,0,0,0.7);
    width: 100%;
    height: 100%;
    z-index:2000;
    overflow-y:scroll
  }
  /*add_w_containere*/
  /*header 添加参数信息s*/
  .add_act_val {
    position: absolute;
    top: 50%;
    right: 2vw;
    height: 10vw;
    line-height: 10vw;
    font-size: 4vw;
    text-align: center;
    border-radius: 2vw;
    background-color: #e85454;
    color: #fff;
    padding-left: 1vw;
    padding-right: 1vw;
    transform: translateY(-50%);
  }
  /*header 添加参数信息e*/
  /*添加语音s*/
  .add_voice {
    width: 28vw;
    height: 10vw;
    line-height: 10vw;
    color: #fff;
    background-color: #2aa1a5;
    border-radius: 4vw;
    margin: 2vw auto 2vw;
    box-shadow: 0px 2px 4px 6px rgba(195, 194, 194, 0.32);
  }
  .luy_box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background-color: #fff;
    width: 90vw;
    padding-top: 2vw;
    padding-bottom: 2vw;
    border-radius: 4vw
  }

  .luyi_wapper {
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(0,0,0,0.6);
    z-index: 1000;
    width: 100%;
    height: 100%;
  }

/*添加语音e*/
  /*show_div_wrapper s*/
  .show_div_contain_img {
    width: 90vw;
    height:120vw;
    position:absolute;
    top:2vw;
    left:50%;
    transform:translateX(-50%);
    overflow:scroll;
  }
  .show_div_wrapper_img {
    width: 90vw;
    display: block;
  }
  .show_div_wrapper_certain_btn {
    position:absolute;
    bottom:6vw;
    left:30%;
    transform:translateX(-50%);
    width:30vw;
    height:10vw;
    line-height:10vw;
    text-align:center;
    font-size:6vw;
    letter-spacing:2px;
    background-color:#e85454;
    color:#fff;
    border-radius:2vw;

  }
  .show_div_wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.6);
    z-index:1000;
  }
  /*show_div_wrapper e*/
  /*预测s*/
  .act_letter {
    width: 6vw;
    height: 4.2vw;
    position: absolute;
    right: 12vw;
    top: 50%;
    transform: translateY(-50%);
  }
  .act_close_btn {
    position: absolute;
    top: 30%;
    right: 3vw;
    color: #9f5c2f;
    font-size: 8vw;
    transform: translateY(-50%);
  }
  .act_bot_box {
    margin-left: 3vw;
    margin-top: 1.5vw;
  }
  .act_bot_num{
    font-size:4.5vw;
    color:#fff;

  }
  .act_name{
    font-size:4vw;
    color:#fff;
    margin-top:0.5vw;
  }
  .act_b {
    height: 12vw;
    width: 3.4vw;
    background-color: #fff;
    border: 2px solid #9f5c2f;
    border-radius: 4vw;
    margin: 0 auto;
  }
  .act_bot_w {
    font-size: 4.8vw;
    width: 5vw;
    margin-left: 3.4vw;
    margin-top: 2.8vw;
    color: #fff;
  }
  .acat_bottom {
    background-color: #e54d4c;
    height: 26vw;
    border-top: 1px solid #9f5c2f;
    margin-top: 2.1vw;
    border-radius: 0 0 3vw 3vw;
  }
  .mid_box {
    margin-top: 2.6vw;
  } .mid_box_line {
    width: 58vw;
    height: 5vw;
    line-height: 5vw;
    border: 2px solid #9f5c2f;
    border-radius: 4vw;
    margin-left: 8vw;
  }
  .act_main_img {
    width: 73vw;
    height: 80vw;
    border:2px solid #9f5c2f;
    overflow:hidden;
  }
  .act_header_img {
    position: absolute;
    left: 8vw;
    top: 50%;
    border-radius: 2vw;
    width: 9vw;
    height: 9vw;
    border: 1px solid #9f5c2f;
    transform: translateY(-50%);
  }
  .act_header {
    height: 12vw;
    line-height: 12vw;
    font-size: 5.3vw;
    text-align: center;
    color: #9f5c2f;
    background-color: #fff;
    border-radius: 4vw 4vw 0 0;
  }
  .act_forecast {
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    background-color: rgba(0,0,0,0.6);
    z-index: 1001;
  }
  .act_for_box{
    background-color:#fff;
    width:85.7vw;
    height:130.5vw;
    border-radius:4vw;
    border:2px solid #9f5c2f;
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
  }
  /*预测e*/
  .candidates_box_wrapper {
    width: 100%;
  }
  /*评论s*/
  .commit_btn {
    width: 20vw;
    height: 10vw;
    border-radius: 4vw;
    background-color: #42cd0a;
    text-align: center;
    color: #fff;
    margin-left: 55vw;
    line-height: 10vw;
    margin-top: 1vw;
  }
  .commit_input {
    width: 80%;
    height: 50%;
    border: 3px solid #9f5c2f;
    padding: 5%;
    margin-top: 2vw;
    resize: none;
  }
  .commit_on_put {
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    background-color: rgba(0,0,0,0.5);
  }
  .commit_box{
    width:80vw;
    height:50vw;
    background-color:#fff;
    position:absolute;
    z-index:1001;
    top:30vw;
    left:50%;
    transform:translateX(-50%);
    border-radius:4vw;
  }
  /*评论e*/
  /*报名s*/
  .smile {
    position: absolute;
    top: 2.5vw;
    left: 5.3vw;
    width: 8.2vw;
  }
  .baom_bottom_s {
    font-size: 3.4vw;
    margin-top: 5vw;
  }
  .icon_img {
    width: 6.2vw;
    vertical-align: bottom;
    margin-left:1vw
  } .add_btn {
    width: 41.2vw;
    height: 8.5vw;
    margin: 4vw auto 0;
  }
  .add_img_btn_1_img {
    width: 6vw;
    height: 4.4vw;
    margin-left: 1vw;
    margin-top: 2.8vw;
  }

  .add_img_btn {
    width: 41vw;
    height: 8.4vw;
    line-height: 8.4vw;
    display: flex;
  }

  .add_img_w {
    font-size: 4.8vw;
  }

  .baom_bot_header {
    font-size: 3.4vw;
    line-height: 5vw;
    margin-bottom: 4.4vw;
    word-wrap: break-word;
    word-break: normal;
    width: 48vw;
    margin:  4.8vw auto 0;
  }

  .wrapper_baom {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(0,0,0,0.7);
    z-index: 1000;
    color: #bc5b14
  }

  .baom_mid_header {
    font-size: 3.4vw;
  }

  .baom_header {
    text-align: center;
    font-size: 4.8vw;
    color: #bc5b14;
    margin-top: 5.6vw;
    margin-bottom: 2.9vw;
    text-align: center;
  }

  .baom {
    width: 64.5vw;
    height: 88.2vw;
    background-color: #fff;
    border-radius: 2vw;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    position:relative;
    z-index:200;

  }

  .close_baom {
    color:#bc5b14;
    font-size: 5vw;
    position: absolute;
    top: 2vw;
    right: 2.9vw;
  }

/*报名e*/
 /*write div s*/
  .write_div{
   height:20vw;
  }
 /*write div e*/
  /*bottom_btn_wrap s*/
  .bottom_btn_wrap  .bottom_now {
    background-color: #e54d4c;
    color: #fff;
  }
  .bottom_btn_wrap .bottom_btn_bm {
    color: #fff;
    background-color: #fea500;
  }
  .bottom_btn_wrap .bottom_btn_pinglun {
    color: #e85454
  }
  .bottom_base_btn {
    width: 20vw;
    border-radius: 1vw;
    height: 1.75rem;
    line-height: 1.75rem;
    background-color: #fff;
    box-shadow: 0 0 8px 2px #8a888869;
  }
  .bottom_btn_share {
    text-align: center;
  }
  .bottom_btn_wrap {
    width: 88vw;
    display: flex;
    justify-content:space-around;
    position:fixed;
    bottom:0.6rem;
    font-size:0.7rem;
    left:50%;
    transform:translate(-50%);
  }
  .bottom_btn_share {
    color: #fea500;
  }
  /*bottom_btn_wrap e*/
  /*activity_container s*/
  .activity_container {
    width: 100%;
    background-color: #eeeeee;
    /*background-image: url(../../static/img/bg_all.png);*/
    background-repeat: no-repeat;
    background-size: cover;
  }
  .bottom_btn_share{

  }
  /*activity_container e*/
  /*header s*/
  header {
    width:100%;
    z-index:1000;
    position: fixed;
    height: 44px;
    line-height: 44px;
    background-color: #9f5c2f;
    font-size: 18px;
    text-align: center;
    color: #fff;
    top:0vw;

  }
  .img_header{
    position:absolute;
    top:50%;
    left:4.2vw;
    width:5.4vw;
    transform:translateY(-50%)
  }
  .my_match {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right:3.6vw;
    /*width:16.2vw;*/
    padding:1vw;
    height:17.5px;
    line-height:17.5px;
    font-size:13px;
    border-radius:2vw;
    border:1px solid #fff;
  }
  /*header e*/

  /*act_banner s*/
  .act_banner {
    width: 88vw;
    /*margin: 0.35rem auto;*/
    margin: 0 auto;
    height: 9.55rem;
    border-radius: 2vw;
    box-shadow: 1px 1px 6px 2px #706b6b69;
    position: relative;
  }
  .act_banner img {
    width: 100%;
    height: 100%;
    border-radius: 2vw
  }
  .act_banner_bot{
    height:1rem;
    line-height:1rem;
    width:100%;
    display:flex;
    justify-content:space-between;
    font-size:0.65rem;
    color:#fff;
    background-color:rgba(0,0,0,0.4);
    position:absolute;
    bottom:0;
    border-radius: 0 0 2vw 2vw;

  }
  .act_banner_bot div:nth-child(1) {
    text-shadow: 2px 3px 2px #302f2f;
    margin-left: 5vw;
    z-index: 100;
    position: relative;
  }
  .act_banner_bot div:nth-child(2) {
    text-shadow: 2px 3px 2px #302f2f;
    margin-right: 5vw;
    z-index: 100;
    position: relative;
  }

  /*act_banner e*/
  /*candidates s*/
  .candidates {
    border-radius: 2vw;
    width: 77vw;
    height: 6.25rem;
    margin: 0.9rem auto 0;
    background-color: #fff;
    position: relative;
    padding-left: 5vw;
    padding-right: 5vw;
    box-shadow: 1px 1px 6px 2px #706b6b69;
  }
  .candidates_title {
    width: 13vw;
    position: absolute;
    top: -0.5rem;
    left: 2vw;
    height: 0.87rem;
    line-height: 0.87rem;
    text-align: center;
    background-color: #fff;
    color: #9f5c2f;
    border-radius:1vw;
    font-size: 0.6rem;
    border: 1px solid #9f5c2f;
  }
  .candidates_box{
    width:100%;
    height:100%;
    display:flex;
    justify-content:space-around;
    position:relative;
  }
  .sub_candidates_box_header_img {
    height: 3rem;
    width: 3rem;
    border: 1px solid #9f5c2f;
    border-radius: 2vw;
    display: block;
    margin-top: 0.6rem;
  }
  .candidates_box_poll {
    width:100%;
    display: flex;
    justify-content: space-around;
    font-size: 0.5rem;
    line-height: 1.5;
    color: #9f5c2f;
  }
  .toupiao {
    font-size: 0.675rem;
    height: 1.15rem;
    border-radius: 1vw;
    line-height: 1.15rem;
    border: 1px solid #9f5c2f;
    color: #9f5c2f;
    width: 100%;

  }
  .candidates_box_right{
    position:absolute;
    top:50%;
    right:-4vw;
    margin-top:-1rem;
    transform:rotate(180deg);
    width:3.6vw;
  }
  .candidates_box_left {
    position: absolute;
    top: 50%;
    left: -4vw;
    margin-top: -1rem;
    width: 3.6vw;
  }
  /*candidates e*/
  /* user_info s*/
  .user_info_bottom_write_box{
     height:2rem;
     width:100%;
  }
  .dianzan_activity {
    font-size: 0.6rem;
    color: #ffffff;
    padding-top: 0.6rem;
  }
  .rank_heart_img {
    width: 0.9rem;
    margin:0 auto;
    display:block;
    margin-bottom:0.1rem;
  }
  .user_info {
    margin: 0 auto;
    width: 95vw;
  }
  .user_info_music {
    height: 2.5rem;
    width: 100%;
    background-color: #e85454;
    display: flex;
    justify-content: space-between;
    margin-top: 0.3rem;
  }
  .box_shadow {
    box-shadow: 2px 2px 6px 2px rgba(76, 74, 74, 0.42);
  }
  .user_info_img {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;

  }
  .user_info_user_name {
    height: 1.2rem;
    padding: 0.4rem 0.3rem 0.4rem 0.4rem;
    width: 1.4rem;
    font-size: 3vw;
    background-color: #fff;
    color: #9f5c2f;
    border-radius: 1.5vw;
    letter-spacing: 2px;
    margin-top: 0.3rem;
    font-weight: 500;
    margin-left: 2vw;
  }
  .play_music {
    width: 55vw;
    height: 1.7rem;
    background-image: url(../../static/img/music_on_bot.png);
    background-size:cover;
    margin-top:0.4em;
  }
  .user_info_line{
    width:0.5vw;
    background-color:#fff;
    padding-bottom:8.5vw;
  }
  .more{
    width:9vw;
    display:block;
    margin-right:1vw;
    max-height:2rem;
  }
  /*user_info e*/
</style>
